<template>
  <!-------- 抽屉 (植物信息) -------->

  <div class="plant_dialog">
    <el-drawer
      modal-class="plant-drawer"
      v-model="isDrawer"
      :modal="false"
      :append-to-body="false"
      :show-close="false"
    >
      <!-- 隐藏 抽屉 图标 -->
      <div class="shrink el-icon-arrow-right" @click="handleClose">
        <el-icon><ArrowRight /></el-icon>
      </div>

      <!-- 自定义头部 -->
      <template #header="{ titleId }">
        <div class="el-drawer__title">
          <h4 :id="titleId">{{ itemData.plantName }}</h4>
          <!-- 修改 -->
          <el-icon @click="handlePLantEdit"><EditPen /></el-icon>
        </div>

        <!-- 科/属 -->
        <div class="drawer__info">
          <span>科：{{ itemData.plantFamilies }}</span>
          <span>属：{{ itemData.plantProperty }}</span>
        </div>
      </template>

      <!-- 植物信息 -->
      <ul class="content">
        <li v-for="item in ContentConfig" :key="item.valueType">
          <div class="title">
            <h3>{{ item.title }}</h3>
            <span
              @click="handleMore(itemData[item.valueType])"
              v-if="itemData[item.valueType]&&itemData[item.valueType].length >= maxContent"
              >更多</span
            >
          </div>

          <!-- 内容 -->
          <div class="text">
            <div v-if="itemData[item.valueType]">
              {{
                itemData[item.valueType].length >= maxContent
                  ? itemData[item.valueType].slice(0, maxContent) + "...."
                  : itemData[item.valueType]
              }}
            </div>
          </div>
        </li>
      </ul>
    </el-drawer>

    <!-- 模态框 详情 -->
    <el-dialog
      v-model="dialogVisible"
      :title="itemData.plantName"
      width="650"
      draggable
      close-icon="CloseBold"
      align-center
      @click.stop
      :close-on-click-modal="false"
    >
      <!-- 内容信息 -->
      <div>
        {{ itemText }}
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: () => false,
  },

  itemData: {
    type: Object,
    default: () => {},
  },
});
const editPlanItem = inject("editPlanItem");
const emit = defineEmits(["update:modelValue"]);

// 植物名字+字段
const ContentConfig = ref([
  {
    title: "基本特征",
    valueType: "plantCharacteristics",
  },
  {
    title: "生长习性",
    valueType: "palntHabitGrowth",
  },
  {
    title: "生态角色",
    valueType: "plantRoleEcology",
  },
  {
    title: "养护需求",
    valueType: "palntMaintenanceNeeds",
  },
  {
    title: "文化寓意",
    valueType: "palntCulturalImplication",
  },
  {
    title: "繁殖方法",
    valueType: "palntMethodsReproduction",
  },
  {
    title: "病虫害防治",
    valueType: "plantPestDiseaseControl",
  },
]);

const isDrawer = ref(props.modelValue); // 抽屉状态
const dialogVisible = ref(false); // 详情模态框状态
const maxContent = ref(72); // 抽屉中最大内容字数

let itemText = ref(""); // 更多详情内容

// 监听修改抽屉状态
watch(
  () => props.modelValue,
  (v) => {
    isDrawer.value = v;
  }
);

// 显示更多模态框
const handleMore = (value) => {
  itemText.value = value; // 赋值当前内容

  dialogVisible.value = true; // 显示模态框
};

/** 隐藏抽屉 */
const handleClose = () => {
  emit("update:modelValue", false);
};

/** 编辑 **/
const handlePLantEdit = () => {
  editPlanItem(true, props.itemData); // 显示编辑模块传递数据
};
</script>

<style lang="scss">
.plant-drawer {
  pointer-events: none;

  .el-drawer {
    pointer-events: auto;
    width: 300px !important;
    height: 824px !important;
    top: 96px;
    overflow-y: auto;
    overflow: unset;
    background: #343957;
    border-radius: 10px 0px 0px 10px;
    box-shadow: -6px 0px 10px 1px rgba(0, 0, 0, 0.1);

    .el-drawer__header {
      display: block;
      color: #fff;
      padding: 24px 30px 0;

      .el-drawer__title {
        display: flex;
        align-content: center;
        justify-content: space-between;

        h4 {
          font-size: 22px;
        }

        i {
          font-size: 20px;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .drawer__info {
        margin-top: 8px;
        // color: #dbddec;
        color: #fff;
        padding-bottom: 24px;
        border-bottom: 1px solid #d4d4d4;

        span {
          font-size: 12px;

          & + span {
            margin-left: 20px;
          }
        }
      }
    }

    .el-drawer__body {
      padding: 0 30px 10px;

      .content {
        li + li {
          margin-top: 16px;
        }

        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;

          h3 {
            font-size: 16px;
            color: #ffffff;
            position: relative;

            &::before {
              content: "";
              display: inline-block;
              width: 4px;
              height: 12px;
              background: #ffffff;
              margin-right: 8px;
              border-radius: 7px 7px 7px 7px;
            }
          }

          span {
            font-size: 12px;
            color: #44bd60;
            cursor: pointer;

            &:hover {
              opacity: 0.8;
            }
          }
        }

        .text {
          width: 240px;
          height: 100px;
          color: #fff;
          padding: 16px;
          overflow-y: auto;
          margin-top: 10px;
          font-size: 12px;
          border-radius: 10px 10px 10px 10px;
          background: rgba(255, 255, 255, 0.05);
        }
      }
    }
  }

  .shrink {
    position: absolute;
    top: 60px;
    left: -35px;
    width: 28px;
    height: 28px;
    line-height: 31px;
    text-align: center;
    color: #fff;
    background: #343957;
    cursor: pointer;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 8px 10px -5px rgb(0 0 0 / 10%),
      0 16px 24px 2px rgb(0 0 0 / 4%), 0 6px 30px 5px rgb(0 0 0 / 2%);

    &:hover {
      opacity: 0.8;
    }
  }
}
</style>

<style lang="scss" scoped>
// 模态框
.plant_dialog {
  ::v-deep(.el-dialog) {
    border-radius: 10px 10px 10px 10px;

    // 模态框居中显示
    &.el-dialog:not(.is-fullscreen) {
      margin: auto !important;
    }

    .el-dialog__header {
      .el-dialog__title {
        font-size: 18px;
        color: #363636;
        font-weight: bold;
      }

      // 关闭图标
      .el-dialog__headerbtn .el-dialog__close {
        color: #363636;
        font-size: 18px;
      }

      // 划过关闭图标
      .el-dialog__headerbtn:focus .el-dialog__close,
      .el-dialog__headerbtn:hover .el-dialog__close {
        color: #646464;
      }
    }

    .el-dialog__body {
      padding: 10px 32px 30px;
      color: #363636;
      font-size: 14px;
      max-height: 400px;
      line-height: 1.5;
    }

    .dialog-footer {
      button {
        padding: 0;
        width: 108px;
        height: 40px;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #5974ff;
        font-size: 14px;
        color: #5974ff;

        &:hover,
        &:focus {
          background: none;
          opacity: 0.8;
        }

        &.el-button--primary {
          color: #fff;
          border: 0;
          background: #5974ff;
          &:hover,
          &:focus {
            background: #5974ff;
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>
